<template>
    <div class="w-full h-full -100 dark:-900 p-3">
        <div class="w-full h-full flex flex-col p-4 bg-white dark:bg-black text-gery-700 dark:text-gery-300">
            <a-tabs v-model:activeKey="state.activeKey">
                <a-tab-pane key="1" tab="Compoisition API"></a-tab-pane>
                <a-tab-pane key="2" tab="常用校验"></a-tab-pane>
                <a-tab-pane key="3" tab="常用方法"></a-tab-pane>
                <a-tab-pane key="4" tab="字符串"></a-tab-pane>
                <a-tab-pane key="5" tab="对象"></a-tab-pane>
                <a-tab-pane key="6" tab="数组"></a-tab-pane>
                <a-tab-pane key="7" tab="数字"></a-tab-pane>
                <a-tab-pane key="8" tab="计算"></a-tab-pane>
            </a-tabs>
            <div class="h-full p-4 overflow-y-auto" v-if="state.activeKey == '1'">
                setup()：一个组件中必须存在的函数，用于设置组件的初始状态、数据、方法等。
                <a-divider />
                ref()：创建一个响应式的引用对象，可以用于存储一个值。
                <a-divider />
                computed()：创建一个计算属性。
                <a-divider />
                watch()：监听一个响应式数据的变化，并执行相应的回调函数。
                <a-divider />
                watchEffect()：监听一个响应式数据的变化，并在回调函数中执行相关逻辑。
                <a-divider />
                onMounted()：在组件挂载到页面上后执行的钩子函数。
                <a-divider />
                onUpdated()：在组件更新后执行的钩子函数。
                <a-divider />
                onBeforeUnmount()：在组件卸载之前执行的钩子函数。
                <a-divider />
                onUnmounted()：在组件卸载后执行的钩子函数。
                <a-divider />
                provide()：在组件树中向下传递数据。
                <a-divider />
                inject()：在组件树中向上查找数据。
                <a-divider />
                reactive()：创建一个响应式的对象。
                <a-divider />
                toRefs()：将一个响应式对象转换为由多个 ref 对象组成的对象。
                <a-divider />
                readonly()：创建一个只读的响应式对象。
                <a-divider />
                shallowReactive()：创建一个浅响应式的对象。
                <a-divider />
                shallowReadonly()：创建一个浅只读的响应式对象。
                <a-divider />
                markRaw()：标记一个对象为“非响应式”的，不会被 Vue 3 的响应式系统追踪。
                <a-divider />
                toRaw()：将一个响应式对象转换为非响应式的对象。
                <a-divider />
                isRef()：判断一个对象是否是 ref 对象。
                <a-divider />
                isReactive()：判断一个对象是否是响应式的。
                <a-divider />
                isReadonly()：判断一个对象是否是只读的。
                <a-divider />
                isProxy()：判断一个对象是否是通过 Vue 3 的响应式系统创建的代理对象。
                <a-divider />
                getCurrentInstance()：获取当前组件实例对象。
                <a-divider />
                useAttrs()：用于在 setup() 中访问组件的属性。
                <a-divider />
                useSlots()：用于在 setup() 中访问组件的插槽。
                <a-divider />
                useRoute()：用于在 setup() 中访问当前路由信息。
                <a-divider />
                useRouter()：用于在 setup() 中访问 Vue Router 实例。
                <a-divider />
                useStore()：用于在 setup() 中访问 pina 实例。
            </div>
            <div class="h-full p-4 overflow-y-auto" v-if="state.activeKey == '2'">
                <div class="flex">
                    <div>
                        <p>自定义校验</p>
                        validator:(_,obj)=>{return state.special({item:_,value:obj})}}]
                    </div>
                    <div class="ml-20">
                        <p>正则校验</p>
                        pattern:state.pattern.phone
                    </div>
                </div>
                <a-divider />
                customCheck()：非空校验，校验空格符。
                <a-divider />
                pattern.exist：非空校验，不校验空格符。
                <a-divider />
                pattern.phoneS：手机号(mobile phone)中国(严谨), 根据工信部2019年最新公布的手机号段。
                <a-divider />
                pattern.phone：手机号(mobile phone)中国(宽松/常用), 只要是13,14,15,16,17,18,19开头即可。
                <a-divider />
                pattern.phoneL：手机号(mobile phone)中国(最宽松), 只要是1开头即可。
                <a-divider />
                pattern.idcard：身份证号(2代,18位数字),最后一位是校验位,可能为数字或字符X。
                <a-divider />
                pattern.email：邮箱格式校验。
                <a-divider />
                pattern.bank：银行卡号（10到30位, 覆盖对公/私账户, 参考微信支付）。
                <a-divider />
                pattern.carNo：车牌号(新能源+非新能源)。
                <a-divider />
                pattern.symbol：ASCII码表中的全部的特殊字符。
            </div>
        </div>
    </div>
</template>
<script setup>
let state = reactive({
    activeKey: "1",
});

defineExpose({});
const { xGrid, taskPanelRef, batchConfigRef } = toRefs(state);
</script>